<template>
	<div class="user-center">
		
		<div v-if="loading" class="loading">加载中...</div>
		<div v-else-if="error" class="error">{{ error }}</div>
		<div v-else class="user-info">
			<button @click="goBack" class="back-btn">返回</button>
			<div class="avatar">
				<img :src="userInfo.avatar || defaultAvatar" alt="用户头像">
			</div>
			<div class="info">
				<h2>{{ userInfo.username }}</h2>
				<p><span>邮箱:</span> {{ userInfo.email }}</p>
				<p><span>手机:</span> {{ userInfo.phone}}</p>
				<p><span>角色:</span> {{ userInfo.description}}</p>
				<p><span>状态:</span> {{ userInfo.status}}</p>
				<p><span>注册时间:</span> {{ formatDate(userInfo.createTime) }}</p>
				<p><span>最后一次登陆时间:</span> {{ formatDate(userInfo.lastLoginTime) }}</p>
				<p><span>个人简介:</span> {{ userInfo.bio || '这个人很懒，什么都没写' }}</p>
			</div>
			<button @click="editProfile" class="edit-btn">编辑资料</button>
		</div>
	</div>
</template>

<script>
	import defaultAvatar from '../../assets/img/default-avatar.jpeg';
	import {
		getUserProfile
	} from "../../api/index.js";
	import {
		mixin
	} from "../../mixins/index";
	export default {
		mixins: [mixin],
		name: 'UserCenter',
		data() {
			return {
				loading: true,
				error: null,
				userInfo: {
					username: '',
					password: '',
					email: '',
					phone: '',
					status: '',
					createdTime: '',
					updatedTime: '',
					lastLoginTime: '',
					description: ''
				},
				defaultAvatar: defaultAvatar
			};
		},
		created() {
			this.fetchUserInfo();
		},
		methods: {
			async fetchUserInfo() {
				this.loading = true;
				this.error = null;
				try {
					const params = new URLSearchParams();
					const username = localStorage.getItem('username');
					params.append('username', username);
					if (username != null){
						const res = await getUserProfile(params);
						if (res.code === 200) {
							this.userInfo = res.data; // 假设返回数据在res.data中
							this.notify(res.msg);
						} else {
							this.notify(res.msg);
						}
					} else {
						console.error('无效的用户名');
					}
				} catch (err) {
					console.error('获取用户信息失败:', err);
					this.error = '获取用户信息失败，请稍后重试';
					if (err.response && err.response.status === 401) {
						this.error = '请先登录';
						// 跳转到登录页面
						this.$router.push('/login');
					}
				} finally {
					this.loading = false;
				}
			},
			formatDate(timestamp) {
				if (!timestamp) return '未知';
				return new Date(timestamp).toLocaleString();
			},
			editProfile() {
				// 跳转到编辑资料页面
				this.$router.push('/user/edit');
			},
			goBack() {
				this.$router.go(-1); // 返回上一页
				// 或者使用特定路径
				// this.$router.push('/home');
			}
		}
	};
</script>

<style scoped>
	.user-center {
		max-width: 800px;
		margin: 0 auto;
		padding: 20px;
	}

	.loading,
	.error {
		text-align: center;
		padding: 50px;
		font-size: 18px;
	}

	.error {
		color: #f56c6c;
	}

	.user-info {
		display: flex;
		flex-direction: column;
		align-items: center;
		background: #fff;
		padding: 30px;
		border-radius: 8px;
		box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
	}

	.avatar img {
		width: 120px;
		height: 120px;
		border-radius: 50%;
		object-fit: cover;
		border: 3px solid #f0f0f0;
	}

	.info {
		margin-top: 20px;
		text-align: center;
	}

	.info h2 {
		margin-bottom: 15px;
		color: #333;
	}

	.info p {
		margin: 8px 0;
		color: #666;
	}

	.info span {
		color: #999;
		margin-right: 10px;
	}

	.edit-btn {
		margin-top: 20px;
		padding: 8px 20px;
		background: #409eff;
		color: white;
		border: none;
		border-radius: 4px;
		cursor: pointer;
		transition: background 0.3s;
	}

	.edit-btn:hover {
		background: #66b1ff;
	}

	.back-btn {
		position: absolute;
		top: 40px;
		left: 1100px;
		padding: 6px 15px;
		background: #f0f0f0;
		color: #666;
		border: 1px solid #ddd;
		border-radius: 4px;
		cursor: pointer;
		transition: all 0.3s;
	}

	.back-btn:hover {
		background: #e0e0e0;
		border-color: #ccc;
	}
</style>